<template>
  <view class="t-icon" :style="{ width: sizePx, height: sizePx }">
    <text class="t-icon__char" :style="{ fontSize: sizePx }">●</text>
  </view>
</template>

<script setup>
import { computed } from 'vue'

/**
 * TDesign Icon 精简占位版
 * - 为保证页面结构与间距，暂以圆点字符占位
 * - 支持 size 属性；name 不影响占位显示
 */
const props = defineProps({
  name: { type: String, default: '' },
  size: { type: [Number, String], default: 20 }
})

/**
 * 计算像素尺寸字符串
 */
const sizePx = computed(() => (typeof props.size === 'number' ? `${props.size}rpx` : props.size))
</script>

<style>
.t-icon { display: inline-flex; align-items: center; justify-content: center; }
.t-icon__char { color: var(--td-brand-color, #f5a623); }
</style>

